<template>
<div>
  <div style="text-align: center;background-color:#ff4500;color: white;font-size: 12px;padding: 10px 0;border-radius:10px 10px 0 0;">
    预定中，10：00 配送
  </div>
  <el-card style="margin: 10px 0">
    <div><span style="background-color:#F0E68C;padding:1px 3px">新店</span> 蜂鸟快送约20分钟 || 距离493m</div>
    <el-col :span="10" style="margin: 8px 0"><el-button size="small" style="background-color:#FFDEAD;color:#8B4513">￥3 无门槛 &nbsp;&nbsp;|&nbsp; &nbsp;领取</el-button></el-col>
    <el-col :span="12" :offset="2" style="margin: 8px 0"><el-button size="small" type="danger">共 ￥7 店铺 &nbsp;&nbsp;|&nbsp; &nbsp;领取</el-button></el-col>
    <div><el-tag style="margin: 0 5px 10px 0;"
      v-for="item in items"
      :key="item.label"
      type="danger"
      size = "mini"
      effect="plain">
      {{ item.full }}减{{item.cut }}
    </el-tag></div>
    <div style="display: flex;justify-content: space-between" @click="announce= true"><span>公告：{{text}}</span>  <span>↓</span></div>
  </el-card>
  <el-drawer title-style="margin:0"
    title="商店名称"
    :visible.sync="announce"
    direction="btt" size="70%"
  >
    <div style="padding: 0 10px">
      <p style="margin-bottom: 20px">优惠</p>
      <el-row style="margin-bottom: 8px">
      <el-col :span="3"><el-tag type="danger" size = "mini" effect="plain">满减</el-tag></el-col>
      <el-col :span="21"><span v-for="item in items" :key="item.full">满{{item.full}}元减{{item.cut}}元，</span></el-col></el-row>
      <el-row v-for="boon in boons" :key="boon.tag" style="margin-bottom: 8px">
        <el-col :span="3"><el-tag type="danger" size = "mini" effect="plain"> {{ boon.tag }} </el-tag></el-col>
        <el-col :span="21"><span >{{boon.content}}</span></el-col></el-row>
      <p style="margin:20px 0">服务</p>
      <div style="margin-bottom: 10px"> <span style="border: grey solid 1px;color: grey;font-size: 12px;padding: 1px">拒单赔</span>
        <span style="font-size: 12px">商家原因导致订单取消，赔付代金券</span></div>
      <div> <span style="border: grey solid 1px;color: grey;font-size: 12px;padding: 1px">食安保</span>
        <span style="font-size: 12px">该商户食品安全已由国泰产险承担，食品安全有保障</span></div>
      <p style="margin:20px 0">公告</p>
      <span>{{text}}</span>
    </div>
  </el-drawer>
  <el-carousel :interval="5000" arrow="never" height="100px">
    <el-carousel-item v-for="item in 4" :key="item">
    </el-carousel-item>
  </el-carousel>

  <el-tabs tab-position="left" style="margin-top: 20px">
    <el-tab-pane v-for="type in classification"
                 :key="type" :label=type></el-tab-pane>
    <el-row v-for="menu in 4" :key="menu" style="margin-bottom: 10px">
      <el-col :span="8"><el-avatar :size="90" shape="square" src="http://img4.imgtn.bdimg.com/it/u=2984389731,2012309837&fm=26&gp=0.jpg"></el-avatar></el-col>
      <el-col :span="15" style="margin-left: 5px">
        <p style="font-size: 16px">菜名</p>
        <div><span>详细细节</span></div>
        <span>月售454份 好评率98%</span>
        <div style="margin-top:10px;display: flex;justify-content: space-between"><span style="color: red;font-size: 16px">￥12</span>
          <div class="circle">-</div> <span v-show="foodAmount">{{amount}}</span> <div class="circle" @click="addFood"> +</div></div>
      </el-col>
    </el-row>
  </el-tabs>
<div style="background-color:#696969;display: flex;justify-content: space-between" @click="cart=!cart">
  <span style="margin: 15px" :class="foodAmount?'pick':'noPick'">{{total}}</span>
  <el-button style="margin: 5px" type="info" disabled v-show="!foodAmount">20元起送</el-button>
  <el-button style="margin: 5px" type="success" v-show="foodAmount" @click="jump('/confirmOrder')">去结算</el-button></div>
  <el-drawer title-style="margin:0"
             title="已选商品"
             :visible.sync="cart"
             direction="btt" size="70%"
  >
    <el-row  style="margin-left: 20px;">
      <el-col :span="6" style="margin-right:20px ;"><el-avatar :size="90" shape="square" src="http://img4.imgtn.bdimg.com/it/u=2984389731,2012309837&fm=26&gp=0.jpg"></el-avatar></el-col>
      <el-col :span="15" style="margin-left: 5px">
        <p style="font-size: 16px">菜名</p>
        <div style="background-color:#f2f2f2;"> <span>选择</span></div>
        <div style="margin-top:10px;display: flex;justify-content: space-between"><span style="color: red;font-size: 16px">￥12</span>
          <div class="circle">-</div> <span v-show="foodAmount">{{amount}}</span> <div class="circle" @click="addFood"> +</div></div>
      </el-col>
    </el-row>
  </el-drawer>
</div>
</template>

<script>
    export default {
        name: "Menu",
        data(){
            return{
                items:[
                    {full:33,cut:31},{full:50,cut:32},{full:66,cut:38},{full:150,cut:70},
                ],
                text:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
                announce:false,
                boons:[
                    {tag:' 会员 ',content:'超级会员领3元无门槛红包'},
                    {tag:' 特价 ',content:'特价商品14.99元起'},
                    {tag:' 新客 ',content:'本店新客立减1元'},
                    {tag:' 红包 ',content:'实付5元返2元店铺专享红包'},
                    {tag:' 红包 ',content:'进店领7元店铺专享红包'},
                    {tag:' 首单 ',content:'新用户首单立减8元'}
                ],
                classification:['热销','优惠','小吃类','小炒类','扁食类','汤粉面类'],
                foodAmount:false,
                amount:0,
                total:'未选购商品',
                cart:false,
            }
        },
        methods:{
            addFood(){
                this.foodAmount=true;
                this.amount+=1;
                this.total="￥"+ 12*this.amount;
            },
            jump(route) {
                this.$router.push(route);
            },
        }
    }
</script>

<style scoped>
div{
  font-size: 12px;
}
  p{
    margin: 0;
    font-size: 15px;
  }
span{
  color: 	#696969
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.el-tabs--left .el-tabs__item.is-left{
  text-align: center;
}
  .circle{
    color: white;
    font-weight: bold;
    text-align:center;
    border-radius: 50%;
    background-color:#409EFF;
    border: #409EFF 1px solid;
width: 23px;height: 23px;

    font-size: 16px;
    display: inline-block
  }
  .noPick{
    color: #f2f2f2;
  }
  .pick{
    color: white;
    font-size: 16px;
    font-weight: bold;
  }
</style>
